<template>
  <div>
    <h2>这是首页</h2>
    <div class="box">
      <p>
        这是p
        <span>这是span</span>
      </p>
    </div>

    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data () {
    return {
      msg: '你好世界'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
$color: #dc1be4;
.box{
  width: 100px + 100px;
  height:3*100px;
  background-color: $color;
  p{
    background-color: rgb(190, 207, 90);
    span{
      background-color: rgb(39, 228, 39);
      &:hover{
        color: red;
      }
    }
  }
}
/* // 定义混入 混合
@mixin box{
  width: 200px;
  height: 200px;
  background: pink;
}
// 导入混入
.box2{
  @include box;
}
.box3{
  @include box;
  border: 10px solid #dc0912;
} */

// 定义混入 混合 定义参数
@mixin box($color:pink){
  width: 200px;
  height: 200px;
  background: $color;
}
// 导入混入
.box2{
  @include box;
}
.box3{
  @include box(skyblue);
  border: 10px solid #dc0912;
}
</style>
